<template>
  <div ref="chartRef" :style="{ height, width }"></div>
</template>
<script lang="ts">
  import { defineComponent, PropType, ref, Ref, watchEffect, reactive, watch } from "vue"
  import { useECharts } from "/@/hooks/web/useECharts"

  export default defineComponent({
    name: "Pie",
    props: {
      chartData: {
        type: Array,
        default: () => [],
      },
      size: {
        type: Object,
        default: () => {},
      },
      option: {
        type: Object,
        default: () => ({}),
      },
      width: {
        type: String as PropType<string>,
        default: "100%",
      },
      height: {
        type: String as PropType<string>,
        default: "calc(100vh - 78px)",
      },
    },
    emits: ["click"],
    setup(props, { emit }) {
      const chartRef = ref<HTMLDivElement | null>(null)
      const { setOptions, getInstance, resize } = useECharts(chartRef as Ref<HTMLDivElement>)
      const option = reactive({
        tooltip: {
          formatter: "{b} ({c})",
        },
        series: [
          {
            type: "pie",
            radius: "72%",
            center: ["50%", "55%"],
            data: [],
            labelLine: { show: true },
            label: {
              show: true,
              formatter: "{b} \n ({d}%)",
              color: "#B1B9D3",
            },
          },
        ],
      })

      watchEffect(() => {
        props.chartData && initCharts()
      })
      /**
       * 监听拖拽大小变化
       */
      watch(
        () => props.size,
        () => {
          resize()
        },
        {
          immediate: true,
        }
      )
      function initCharts() {
        if (props.option) {
          Object.assign(option, props.option)
        }
        option.series[0].data = props.chartData
        setOptions(option)
        resize()
        getInstance()?.off("click", onClick)
        getInstance()?.on("click", onClick)
      }

      function onClick(params) {
        emit("click", params)
      }

      return { chartRef }
    },
  })
</script>
